<template>
    <div style="width: 100%; height: 100vh;background-color: blue;overflow: hidden">
        <div style="width: 400px; margin: 150px auto">
          <div style="color: #cccccc; font-size: 30px;text-align: center">欢迎注册</div>
            <el-form ref="form" :model="form"  size="normal" :rules="rules">
                <el-form-item prop="username">
                    <el-input placeholder="用户名" prefix-icon="el-icon-search" v-model="form.username" ></el-input>     <!--prefix-icon用于添加图标-->
                </el-form-item>
                <el-form-item prop="nickName">
                    <el-input placeholder="昵称" v-model="form.nickName" ></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input  class="el-icon-lock" placeholder="密码"  v-model="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item prop="confirm">
                    <el-input  class="el-icon-lock" placeholder="确认密码"  v-model="form.confirm" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="display:flex">
                        <el-button style = "width: 60px" type="warning" @click="$router.push('/login')">点击登录</el-button>
                    </div>
                    <div style="margin-left:10px;width: 80%">
                        <el-button style = "width: 100%" type="primary" @click="register">注册</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    // import {Lock} from '@element-plus/icons-vue'
    // component:{
    //     Lock
    // }
    import request from "../utils/request";

    export default {
        name: "Register",
        data(){
            return{
                form:{},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    nickName: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    confirm: [
                        {required: true, message: '确认密码', trigger: 'blur'},
                    ]
                }
            }
        },
        methods:{
            register(){//注册方法
                if (this.form.password !== this.form.confirm) {
                    this.$message({
                        type:"error",
                        message:'俩次密码不一致！'
                    })
                    return
                }

                this.$refs['form'].validate((valid) => {        //发送请求前校验,如是否非空
                    if (valid) {
                        request.post("/user/register",this.form).then(res => {
                            if (res.code == '0') {
                                this.$message({
                                    type:"success",
                                    message:"注册成功"
                                })
                                this.$router.push("/login")      //成功后进行页面跳转
                            } else {
                                this.$message({
                                    type: "error",
                                    message:res.msg
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>